<template>
    <div class="card">
        <div class="left-box">
            <div class="title">{{ title }}</div>
            <div class="sub-title" v-show="subTitle">{{ subTitle }}</div>
        </div>
        <div class="right-box">
            <div class="icon" :style="`--icon: url(${ icon })`"></div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: { type: String,  default: '' },
    subTitle: { type: String,  default: '' },
    icon: { type: String,  default: '' },
});
</script>

<style scoped lang="less">
.card {
    box-sizing: border-box;
    padding: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.1);
    border-radius: 0.5vw;

    .left-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5vw;

        .title {
            font-size: 0.9vw;
            color: #666;
        }

        .sub-title {
            font-size: 1.1vw;
            font-weight: 600;
        }
    }

    .right-box {
        --size: 3vw;
        width: var(--size);
        height: var(--size);

        .icon {
            --w: var(--size);
            --h: var(--size);
        }
    }
}
</style>